<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <button type="button" id="tx-ccz-0" data-id="1" data-name="无" class="btn btn-default btn_common" onclick="selectCcz(this)">无</button>
    <button type="button" id="tx-ccz-1" data-id="2" data-name="V钝针" class="btn btn-default btn_common" onclick="selectCcz(this)">V钝针</button>
    <button type="button" id="tx-ccz-2" data-id="3" data-name="V锐针" class="btn btn-default btn_common" onclick="selectCcz(this)">V锐针</button>
    <button type="button" id="tx-ccz-3" data-id="4" data-name="A锐针" class="btn btn-default btn_common" onclick="selectCcz(this)">A锐针</button>
    <button type="button" id="tx-ccz-4" data-id="5" data-name="A钝针" class="btn btn-default btn_common" onclick="selectCcz(this)">A钝针</button>
</body>
<script>
    // JSP OK
    function changetx_zl_fs(param){
      $("select[name='tx_zl_fs']").find("option[value="+param+"]").attr("selected","selected");
      if("0"==param){
        $("tr.txfs-tr-cc").removeClass("hidden")
        $("span.cc_hy_label").text("穿刺");
        $("td.td_cc_fs,td.td_cc_z,td.tx_ccfx").removeClass("hidden");
        if($("input[name='tx_ccfs']").val().indexOf("绳梯法") >= 0){
	      	$("td.tx_ccwd").removeClass("hidden")
	      	$("td.tx_tlpic").addClass("hidden")
	      }else{
	      	$("td.tx_tlpic").removeClass("hidden")
	      	$("td.tx_ccwd").addClass("hidden")
	      }
      }
      if("1"==param){
        $("span.cc_hy_label").text("换药");
        $("td.td_cc_fs").addClass("hidden");
        $("input[name='tx_ccfs']").val("");
	    $("input[name='tx_ccz']").val("");
	    $("tr.txfs-tr-cc").addClass("hidden")
      }
   }
   
   // 判断穿刺方式是否包含绳梯法
   function switchCcfs(){
      if($("#tx_ccfs").val().indexOf("绳梯法") >= 0){
      	$("td.tx_ccwd").removeClass("hidden")
      	$("td.tx_tlpic").addClass("hidden")
      }else{
      	$("td.tx_tlpic").removeClass("hidden")
      	$("td.tx_ccwd").addClass("hidden")
      }
   }
   switchCcfs()
   
   // 选择穿刺方式
   $("#tx_zxlj_table").off("click.ccfs").on("click.ccfs","#tx_ccfs",function(){
   		var begintxpage = layer.open({
					title : "穿刺方式",
					type : 1,
					skin : 'layui-layer-txform',
					area : [ "528px", "620px" ],
					closeBtn : 1,
					shadeClose: true,
					content :$("#ccfs_template").html()
		       });
		var text = $("#tx_ccfs").val();
		$("div.ccfs-tpl .btn").each(function(i,v){
			var str = $(v).text();
			if(text.indexOf(str) >= 0){
				$(v).addClass("btn_active")
			}
		})       
   })
   
   // 弹框选择切换穿刺方式
   function selectmultiple(tag){
   	var selectValue = $(tag).text();
   	if(selectValue == "无"){
   		$(tag).toggleClass("btn_active").siblings().removeClass("btn_active")
   	}else{
   		$(".select-cc-0").removeClass("btn_active")
   		$(tag).toggleClass("btn_active")
   	}
   }
   
   // 保存选择的穿刺方式
   $("body").off("click.save-ccfs").on("click.save-ccfs","#save-ccfs",function(){
    var str = '';
   	$("div.ccfs-tpl button.btn_active").each(function(i,v){
   		var ccfs = $(v).text() + ",";
   		str += ccfs
   	})
   	if(str){
   		str = str.substring(0, str.length - 1); 
   	}
   	console.log(str)
   	$("#tx_ccfs").val(str)
   	switchCcfs();
   	$(".layui-layer-setwin .layui-layer-close").trigger("click")
   })
   
   // 选择穿刺针
   $("#tx_zxlj_table").off("click.ccz").on("click.ccz","#tx_ccz",function(){
   		var begintxpage = layer.open({
					title : "选择穿刺针",
					type : 1,
					skin : 'layui-layer-txform',
					area : [ "528px", "620px" ],
					closeBtn : 1,
					shadeClose: true,
					content :$("#ccz_template").html()
		       });
		var text = $("#tx_ccz").val();
		$("div.ccz-tpl .btn").each(function(i,v){
			var str = $(v).text();
			if(text.indexOf(str) >= 0){
				$(v).addClass("btn_active")
			}
		})       
   })
   
   // 保存选择的穿刺针
   $("body").off("click.save-ccz").on("click.save-ccz","#save-ccz",function(){
    var str = '';
   	$("div.ccfs-tpl button.btn_active").each(function(i,v){
   		var ccz = $(v).text() + ",";
   		str += ccz
   	})
   	if(str){
   		str = str.substring(0, str.length - 1); 
   	}
   	console.log(str)
   	$("#tx_ccz").val(str)
   	$(".layui-layer-setwin .layui-layer-close").trigger("click")
   })
   
   // 查看通路图片
   $("body").off("click.viewpic").on("click.viewpic","#tx_viewpic",function(){
    var begintxpage = layer.open({
					title : "通路图片",
					type : 1,
					skin : 'layui-layer-txform',
					area : [ "528px", "620px" ],
					closeBtn : 1,
					shadeClose: true,
					content :$("#xgtlwdpic_template").html()
		       });
		       // 显示通路图片
  		var tx_number = ${param.tx_number};
  		var user_id = ${user_id.substring(0, 4)};
  			var pic_view = $("#view-markpic-wrap");
  			var src = 'https://biangene.oss-cn-shenzhen.aliyuncs.com/xgtl/${user_id.substring(0, 4)}/${param.tx_number}.png?tag='+parseInt(Math.random()*1000);
  			pic_view.find("img").attr("src",src);
  			pic_view.find("img").attr("onerror","this.src='https://biangene.oss-cn-shenzhen.aliyuncs.com/xgtl/1162/default.png?v=20180126';xgtlImgLoadError();")
  			
  			
  			$.post("xgtl/listxgtlwdt.shtml",{"tx_number":tx_number},function(res){
  				if(res.status.length == 0){
					return
				}
  				$("#point_mark_img_wrap1").find("div").remove()
				var mark_data = JSON.parse(res.status[0].tx_xgtl_text),			
				 	mark_A = mark_data.A,
				 	mark_V = mark_data.V,
				 	mark_T = mark_data.T;
				if(mark_A.length == 0 && mark_V == 0){
					return
				}
				
				mark_A.map(function (i, v) {
					var tag_span_a1 = '<span class="mark-line mark-line-a" style="transform: rotate(' + i.rotate +
						'deg);" data-rotate="' + i.rotate + '"></span>';
					var num = parseInt(i.markNum);
					var markDom = '<div class="mtx-mark-tag mark-target-a mark-target-a' + num + '" data-num=' + num +
						' style="position:absolute;left:' + i.left + 'px;top:' + i.top + 'px;">' + num + tag_span_a1 + '</div>';
						console.log(markDom)
					$(markDom).appendTo($("#point_mark_img_wrap1"));
				})
	
				mark_V.map(function (i, v) {
					//console.log(i)
					var tag_span = '<span class="mark-line mark-line-v" style="transform: rotate(' + i.rotate +
						'deg);" data-rotate="' + i.rotate + '"></span>';
					var num = parseInt(i.markNum);
					var markDom = '<div class="mtx-mark-tag mark-target-v mark-target-v' + num + '" data-num=' + num +
						' style="position:absolute;left:' + i.left + 'px;top:' + i.top + 'px;">' + num + tag_span + '</div>';
					$(markDom).appendTo($("#point_mark_img_wrap1"));
				})
	
				mark_T.map(function (i, v) {
					//console.log(i)
					var markDom = '<div class="add-mark-text-wrap" style="position:absolute;left:' + i.left + '%;top:' + i.top + '%;width:'+i.w+'%;">'
									+	'<input type="text"  class="mark-text-ipt" value="'+ i.text +'" readonly="true" style="width:'+ i.width +'px;">'
									+	'<span class="mark-text-line" style="transform: rotate(' + i.rotate + 'deg);" data-rotate="' + i.rotate + '"></span>'
									+'</div>'	
					$(markDom).appendTo($("#point_mark_img_wrap1"));
				})
				var initScale = $("#tx_form").width() / 610;
				
				var scale = $("#point_mark_img_wrap1").width() / 610 || initScale; //PC端的宽度为600，计算缩放比例
				console.log($("#tx_form").width(),$("#point_mark_img_wrap1").width())
				$("#point_mark_img_wrap1 .mtx-mark-tag").each(function (i, v) {
					var $that = $(this),
						width = parseInt($that.width()) * scale,
						height = parseInt($that.height()) * scale,
						left = parseInt($that.position().left) * scale,
						top = parseInt($that.position().top) * scale;
					$that.css({
						"left": left + "px",
						"top": top + "px",
						"width": width + "px",
						"height": height + "px",
						"line-height": height + "px",
						"border-radius": height / 2 + "px"
					})
					
					var $line = $that.find(".mark-line");
					$line.css({
						"width": $line.width() * scale,
						"transform": "rotate(" + $line.data("rotate") + "deg)"
					})
					if(scale < 1 ){
						$that.css({
							"transform": "scale(1.5,1.5)"
						})
						$line.css({
							"transform": "rotate(" + $line.data("rotate") + "deg) scale(0.6666)"
						})
					}
					if(scale > 1 ){
						$that.css({
							"font-size": "24px"
						})
						$line.css({
							"transform": "rotate(" + $line.data("rotate") + "deg)"
						})
					}
				})
				
				$("#point_mark_img_wrap1 .add-mark-text-wrap").each(function (i, v) {
					console.log(v)
					var $that = $(this),
						width = parseInt($that.width()) * scale,
						height = parseInt($that.height()) * scale;
					$that.css({
						/* "width": width + "px", */
						"height": height + "px"
					})
					
					var $line = $that.find(".mark-text-line");
					$line.css({
						"width": $line.width() * scale,
						"transform": "rotate(" + $line.data("rotate") + "deg)"
					})
				})
  			})
  			pic_view.css("display","flex");
  			pic_view.on("touchstart", "div,img",function (e) {
  				e.stopPropagation();
	            //e.preventDefault(); //阻止触摸时页面的滚动，缩放
  			})
  			$("#markpicWarp2 .close-view-img_").click(function(){
  				pic_view.css("display","none");
  			})
  		
  		 
  		
   })
   function xgtlImgLoadError(){
		layer.msg("暂无通路图片")
	}
  		
  	// 选择及查看位点
  	var xgtl_ccwd_page=null;
  	var tx_number = ${param.tx_number};
	var user_id = ${userinfo.USER_ID.substring(0, 4)};
    $("body").on("click","#selectMark_show",function(){ 
       xgtl_pic_page=layer.open({
	        type: 2,
			title: "穿刺位点",
			closeBtn: 0,
			anim: 2,
			shadeClose: true,
			skin:'layui-layer-txform',
			area: [ "528px", "620px" ],
			content:'txform/mtxform_xgtlccwd.shtml?tx_number=${param.tx_number}' 
	   });
   });
</script>
<script>
    function changetx_zl_fs(param) {
        $("select[name='tx_zl_fs']").find("option[value=" + param + "]").attr("selected", "selected");
        if ("0" == param) {
            $("tr.txfs-tr-cc").removeClass("hidden")
            $("span.cc_hy_label").text("穿刺");
            $("td.td_cc_fs,td.td_cc_z,td.tx_ccfx").removeClass("hidden");
            if ($("input[name='tx_ccfs']").val().indexOf("绳梯法") >= 0) {
                $("td.tx_ccwd").removeClass("hidden")
                $("td.tx_tlpic").addClass("hidden")
            } else {
                $("td.tx_tlpic").removeClass("hidden")
                $("td.tx_ccwd").addClass("hidden")
            }
        }
        if ("1" == param) {
            $("span.cc_hy_label").text("换药");
            $("td.td_cc_fs").addClass("hidden");
            $("input[name='tx_ccfs']").val("");
            $("input[name='tx_ccz']").val("");
            $("tr.txfs-tr-cc").addClass("hidden")
        }
    }

    // 判断穿刺方式是否包含绳梯法
    function switchCcfs() {
        if ($("#tx_ccfs").val().indexOf("绳梯法") >= 0) {
            $("td.tx_ccwd").removeClass("hidden")
            $("td.tx_tlpic").addClass("hidden")
        } else {
            $("td.tx_tlpic").removeClass("hidden")
            $("td.tx_ccwd").addClass("hidden")
        }
    }
    switchCcfs()

    // 选择穿刺方式
    $("#tx_zxlj_table").off("click.ccfs").on("click.ccfs", "#tx_ccfs", function () {
        var begintxpage = layer.open({
            title: "穿刺方式",
            type: 1,
            skin: 'layui-layer-txform',
            area: ["528px", "620px"],
            closeBtn: 1,
            shadeClose: true,
            content: $("#ccfs_template").html()
        });
        var text = $("#tx_ccfs").val();
        $("div.ccfs-tpl .btn").each(function (i, v) {
            var str = $(v).text();
            if (text.indexOf(str) >= 0) {
                $(v).addClass("btn_active")
            }
        })
    })

    // 弹框选择切换穿刺方式
    function selectmultiple(tag) {
        var selectValue = $(tag).text();
        if (selectValue == "无") {
            $(tag).toggleClass("btn_active").siblings().removeClass("btn_active")
        } else {
            $(".select-cc-0").removeClass("btn_active")
            $(tag).toggleClass("btn_active")
        }
    }

    // 保存选择的穿刺方式
    $("body").off("click.save-ccfs").on("click.save-ccfs", "#save-ccfs", function () {
        var str = '';
        $("div.ccfs-tpl button.btn_active").each(function (i, v) {
            var ccfs = $(v).text() + ",";
            str += ccfs
        })
        if (str) {
            str = str.substring(0, str.length - 1);
        }
        console.log(str)
        $("#tx_ccfs").val(str)
        switchCcfs();
        $(".layui-layer-setwin .layui-layer-close").trigger("click")
    })

    // 选择穿刺针
    $("#tx_zxlj_table").off("click.ccz").on("click.ccz", "#tx_ccz", function () {
        var begintxpage = layer.open({
            title: "选择穿刺针",
            type: 1,
            skin: 'layui-layer-txform',
            area: ["528px", "620px"],
            closeBtn: 1,
            shadeClose: true,
            content: $("#ccz_template").html()
        });
        var text = $("#tx_ccz").val();
        $("div.ccz-tpl .btn").each(function (i, v) {
            var str = $(v).text();
            if (text.indexOf(str) >= 0) {
                $(v).addClass("btn_active")
            }
        })
    })

    // 保存选择的穿刺针
    $("body").off("click.save-ccz").on("click.save-ccz", "#save-ccz", function () {
        var str = '';
        $("div.ccfs-tpl button.btn_active").each(function (i, v) {
            var ccz = $(v).text() + ",";
            str += ccz
        })
        if (str) {
            str = str.substring(0, str.length - 1);
        }
        console.log(str)
        $("#tx_ccz").val(str)
        $(".layui-layer-setwin .layui-layer-close").trigger("click")
    })

    // 查看通路图片
    $("body").off("click.viewpic").on("click.viewpic", "#tx_viewpic", function () {
        var begintxpage = layer.open({
            title: "通路图片",
            type: 1,
            skin: 'layui-layer-txform',
            area: ["528px", "620px"],
            closeBtn: 1,
            shadeClose: true,
            content: $("#xgtlwdpic_template").html()
        });
        // 显示通路图片
        var tx_number = $ {
            param.tx_number
        };
        var user_id = $ {
            user_id.substring(0, 4)
        };
        var pic_view = $("#view-markpic-wrap");
        var src =
            'https://biangene.oss-cn-shenzhen.aliyuncs.com/xgtl/${user_id.substring(0, 4)}/${param.tx_number}.png?tag=' +
            parseInt(Math.random() * 1000);
        pic_view.find("img").attr("src", src);
        pic_view.find("img").attr("onerror",
            "this.src='https://biangene.oss-cn-shenzhen.aliyuncs.com/xgtl/1162/default.png?v=20180126';xgtlImgLoadError();"
        )


        $.post("xgtl/listxgtlwdt.shtml", {
            "tx_number": tx_number
        }, function (res) {
            if (res.status.length == 0) {
                return
            }
            $("#point_mark_img_wrap1").find("div").remove()
            var mark_data = JSON.parse(res.status[0].tx_xgtl_text),
                mark_A = mark_data.A,
                mark_V = mark_data.V,
                mark_T = mark_data.T;
            if (mark_A.length == 0 && mark_V == 0) {
                return
            }

            mark_A.map(function (i, v) {
                var tag_span_a1 =
                    '<span class="mark-line mark-line-a" style="transform: rotate(' + i.rotate +
                    'deg);" data-rotate="' + i.rotate + '"></span>';
                var num = parseInt(i.markNum);
                var markDom = '<div class="mtx-mark-tag mark-target-a mark-target-a' + num +
                    '" data-num=' + num +
                    ' style="position:absolute;left:' + i.left + 'px;top:' + i.top + 'px;">' +
                    num + tag_span_a1 + '</div>';
                console.log(markDom)
                $(markDom).appendTo($("#point_mark_img_wrap1"));
            })

            mark_V.map(function (i, v) {
                //console.log(i)
                var tag_span = '<span class="mark-line mark-line-v" style="transform: rotate(' +
                    i.rotate +
                    'deg);" data-rotate="' + i.rotate + '"></span>';
                var num = parseInt(i.markNum);
                var markDom = '<div class="mtx-mark-tag mark-target-v mark-target-v' + num +
                    '" data-num=' + num +
                    ' style="position:absolute;left:' + i.left + 'px;top:' + i.top + 'px;">' +
                    num + tag_span + '</div>';
                $(markDom).appendTo($("#point_mark_img_wrap1"));
            })

            mark_T.map(function (i, v) {
                //console.log(i)
                var markDom = '<div class="add-mark-text-wrap" style="position:absolute;left:' +
                    i.left + '%;top:' + i.top + '%;width:' + i.w + '%;">' +
                    '<input type="text"  class="mark-text-ipt" value="' + i.text +
                    '" readonly="true" style="width:' + i.width + 'px;">' +
                    '<span class="mark-text-line" style="transform: rotate(' + i.rotate +
                    'deg);" data-rotate="' + i.rotate + '"></span>' +
                    '</div>'
                $(markDom).appendTo($("#point_mark_img_wrap1"));
            })
            var initScale = $("#tx_form").width() / 610;

            var scale = $("#point_mark_img_wrap1").width() / 610 || initScale; //PC端的宽度为600，计算缩放比例
            console.log($("#tx_form").width(), $("#point_mark_img_wrap1").width())
            $("#point_mark_img_wrap1 .mtx-mark-tag").each(function (i, v) {
                var $that = $(this),
                    width = parseInt($that.width()) * scale,
                    height = parseInt($that.height()) * scale,
                    left = parseInt($that.position().left) * scale,
                    top = parseInt($that.position().top) * scale;
                $that.css({
                    "left": left + "px",
                    "top": top + "px",
                    "width": width + "px",
                    "height": height + "px",
                    "line-height": height + "px",
                    "border-radius": height / 2 + "px"
                })

                var $line = $that.find(".mark-line");
                $line.css({
                    "width": $line.width() * scale,
                    "transform": "rotate(" + $line.data("rotate") + "deg)"
                })
                if (scale < 1) {
                    $that.css({
                        "transform": "scale(1.5,1.5)"
                    })
                    $line.css({
                        "transform": "rotate(" + $line.data("rotate") +
                            "deg) scale(0.6666)"
                    })
                }
                if (scale > 1) {
                    $that.css({
                        "font-size": "24px"
                    })
                    $line.css({
                        "transform": "rotate(" + $line.data("rotate") + "deg)"
                    })
                }
            })

            $("#point_mark_img_wrap1 .add-mark-text-wrap").each(function (i, v) {
                console.log(v)
                var $that = $(this),
                    width = parseInt($that.width()) * scale,
                    height = parseInt($that.height()) * scale;
                $that.css({
                    /* "width": width + "px", */
                    "height": height + "px"
                })

                var $line = $that.find(".mark-text-line");
                $line.css({
                    "width": $line.width() * scale,
                    "transform": "rotate(" + $line.data("rotate") + "deg)"
                })
            })
        })
        pic_view.css("display", "flex");
        pic_view.on("touchstart", "div,img", function (e) {
            e.stopPropagation();
            //e.preventDefault(); //阻止触摸时页面的滚动，缩放
        })
        $("#markpicWarp2 .close-view-img_").click(function () {
            pic_view.css("display", "none");
        })



    })

    function xgtlImgLoadError() {
        layer.msg("暂无通路图片")
    }

    // 选择及查看位点
    var xgtl_ccwd_page = null;
    var tx_number = '${param.tx_number}';
    var user_id = '${userinfo.USER_ID.substring(0, 4)}';
    $("body").on("click", "#selectMark_show", function () {
        xgtl_pic_page = layer.open({
            type: 2,
            title: "穿刺位点",
            closeBtn: 0,
            anim: 2,
            shadeClose: true,
            skin: 'layui-layer-txform',
            area: ["528px", "620px"],
            content: 'txform/mtxform_xgtlccwd.shtml?tx_number=${param.tx_number}'
        });
    });
</script>

</html>